<template>
  <el-tabs
    type="border-card"
    v-model="type"
    class="manage-shopping"
    @tab-change="tabChange"
  >
    <el-tab-pane label="商品管理" name="t1">
      <div class="shopping-box">
        <tab1Page ref="tab1PageRef" />
      </div>
    </el-tab-pane>
    <el-tab-pane label="回收站" name="t2">
      <div class="shopping-box">
        <tab2Page ref="tab2PageRef" />
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import tab1Page from "./components/ManageTab1.vue";
import tab2Page from "./components/ManageTab2.vue";
let tab1PageRef = ref(null);
let tab2PageRef = ref(null);
let type = ref("t1");
function tabChange(name) {
  if (name === "t1") {
    tab1PageRef.value.initFun();
  } else {
    tab2PageRef.value.initFun();
  }
}
</script>
<style lang="scss" scoped>
.manage-shopping {
  .shopping-box {
    width: 100%;
    height: calc(100vh - 190px);
    overflow: hidden;
  }
  :deep(.el-tabs__content) {
    padding: 0;
  }
}
</style>
